import React, {Component} from 'react';
import {View, Text, TextInput, StyleSheet, Image, TouchableOpacity, ScrollView} from "react-native";
import {pxToDp} from "../../../../utils/styleKits";
import icon from "../../../../utils/icon";

class Attention extends Component {
  state = {
    data: [
      {name: '林黛玉', gender: 0, age: 15, attention: true, location: '广州', headerImg: 'https://www.itying.com/images/flutter/list1.jpg'},
      {name: '史湘云', gender: 0, age: 16, attention: true, location: '北京', headerImg: 'https://www.itying.com/images/flutter/list2.jpg'},
      {name: '薛宝钗', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list3.jpg'},
      {name: '贾迎春', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list4.jpg'},
      {name: '贾宝玉', gender: 1, age: 15, attention: true, location: '广州', headerImg: 'https://www.itying.com/images/flutter/list5.jpg'},
      {name: '晴雯', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list6.jpg'},
      {name: '紫鹃', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list7.jpg'},
      {name: '鸳鸯', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list8.jpg'},
    ],
    listData: [
      {name: '林黛玉', gender: 0, age: 15, attention: true, location: '广州', headerImg: 'https://www.itying.com/images/flutter/list1.jpg'},
      {name: '史湘云', gender: 0, age: 16, attention: true, location: '北京', headerImg: 'https://www.itying.com/images/flutter/list2.jpg'},
      {name: '薛宝钗', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list3.jpg'},
      {name: '贾迎春', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list4.jpg'},
      {name: '贾宝玉', gender: 1, age: 15, attention: true, location: '广州', headerImg: 'https://www.itying.com/images/flutter/list5.jpg'},
      {name: '晴雯', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list6.jpg'},
      {name: '紫鹃', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list7.jpg'},
      {name: '鸳鸯', gender: 0, age: 17, attention: true, location: '上海', headerImg: 'https://www.itying.com/images/flutter/list8.jpg'},
    ],
    textInput: '',
  };

  render() {
    let {listData, textInput} = this.state;
    return (
      <View style={{flex:1}}>
        <View style={{position:'relative', justifyContent:'center'}}>
          <TextInput inlineImageLeft='search_icon' placeholder={'搜索用户'} style={styles.txtInput} value={textInput}
                     onChangeText={(value)=>{this.search(value)}}/>
          <Text style={{fontFamily:'iconfont',color:'#999',position:'absolute',marginLeft:pxToDp(25)}}>{icon.iconsousuo}</Text>
        </View>

        <ScrollView>
          {
            listData.map((item, i)=>{
              return <View key={i} style={{padding:pxToDp(10),paddingTop:pxToDp(20),paddingBottom:pxToDp(20),
                flexDirection:'row',backgroundColor:'#fff', borderBottomColor:'#ddd',borderBottomWidth:pxToDp(1)}}>
                {/*头像*/}
                <Image source={{uri: item.headerImg}} style={styles.headerImg}/>

                {/*个人信息*/}
                <View style={{marginLeft:pxToDp(10),justifyContent:'space-around'}}>
                  {/*姓名*/}
                  <View style={{flexDirection:"row"}}>
                    <Text style={{marginRight:pxToDp(10)}}>{item.name}</Text>
                    <View style={{backgroundColor:'#fff',justifyContent:'center'}}>
                      <Text style={{fontFamily:'iconfont',marginRight:pxToDp(10)}}>
                        <Text style={{color:'red'}}>{item.gender ? icon.icontanhuanan : icon.icontanhuanv}</Text> {item.age}岁
                      </Text>
                    </View>
                  </View>

                  {/*地址*/}
                  <Text style={{fontFamily:'iconfont'}}>{icon.iconlocation} {item.location}</Text>
                </View>

                {/*关注按钮*/}
                <TouchableOpacity onPress={this.changeAttention.bind(this, i)} style={{flex:1, alignItems: 'flex-end',justifyContent:'center'}}>
                  <Text style={{fontFamily: 'iconfont',borderWidth:pxToDp(1), padding:pxToDp(5), paddingLeft:pxToDp(10),paddingRight:pxToDp(10),
                    borderRadius:pxToDp(5),borderColor:item.attention ? '#eee' : 'orange',color: item.attention ? '#000' : 'orange',}}>
                    {item.attention ?icon.iconhuxiangguanzhu:'+'}  {item.attention ? '取消关注' : '关注'}
                  </Text>
                </TouchableOpacity>
              </View>
            })
          }
        </ScrollView>
      </View>
    );
  }

  // 搜索
  search = (value) => {
    let {listData, data} = this.state;
    let newList = [];

    if (value === '') {
      this.setState({
        textInput: value,
        listData: data
      });
      return
    }

    for (let i=0; i<listData.length; i++){
      let rg = new RegExp(value);
      if (rg.test(listData[i].name)) {
        newList.push(listData[i])
      }
    }
    this.setState({
      textInput: value,
      listData: newList
    });
  };

  // 取消添加关注
  changeAttention = (i) =>{
    let {listData} = this.state;
    listData[i].attention = !listData[i].attention;
    this.setState({
      listData,
      data: listData,
    })
  }
}

const styles = StyleSheet.create({
  txtInput:{
    margin: pxToDp(10),
    borderRadius: pxToDp(20),
    backgroundColor: '#fff',
    paddingLeft: pxToDp(50),
  },

  headerImg: {
    width: pxToDp(50),
    height: pxToDp(50),
    borderRadius: pxToDp(30),
  }
});

export default Attention;